<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/static/client/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/static/client/css/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<%-- 公共部分--%>
<jsp:include page="comonent/top.jsp"/>


<div class="content whisper-content leacots-content">
    <div class="cont w1000">
        <div class="whisper-list">
            <div class="item-box">
                <div class="review-version">
                    <div class="form-box">
                        <img class="banner-img" src="/static/client/img/liuyan.jpg">
                        <div class="form">
                            <form class="layui-form" action="">
                                <input type="hidden" value="${token}" name="token">
                                <input type="hidden" value="${blogUser.centerpath}" name="centerpath">
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block">
                                        <textarea name="content" placeholder="既然来了，就说几句" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="text-align: right;">
                                        <button class="layui-btn definite" lay-submit lay-filter="commentForm">確定</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="volume">
                        全部留言 <span>${page.count}</span>
                    </div>
                    <div class="list-cont">
                        <c:forEach items="${page.dataList}" var="c">
                            <div class="cont">
                                <div class="img">
                                    <img src="${c.photo}" alt="">
                                </div>
                                <div class="text">
                                    <p class="tit"><span class="name">${c.username}</span><span
                                            class="data"><fmt:formatDate value="${c.createtime}"
                                                                         pattern="yyy-MM-dd HH:mm:ss"></fmt:formatDate></span>
                                    </p>
                                    <p class="ct">
                                            ${c.content}
                                    </p>
                                </div>
                            </div>

                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
        <div id="demo" style="text-align: center;"></div>
    </div>
</div>
<script type="text/html" id="laytplCont">
    <div class="cont">
        <div class="img">
            {{# if(d.avatar){ }}
            <img src="{{d.avatar}}" alt="">
            {{# } else { }}
            <img src="/static/client/img/header.png" alt="">
            {{# } }}
        </div>
        <div class="text">
            <p class="tit"><span class="name">{{d.name}}</span><span class="data">2018/06/06</span></p>
            <p class="ct">{{d.cont}}</p>
        </div>
    </div>
</script>
<%-- 公共部分--%>
<jsp:include page="comonent/foot.jsp"/>
<input type="hidden" value="${page.pageIndex}" id="pageIndex">
<input type="hidden" value="${page.count}" id="count">
<script type="text/javascript" src="/static/client/layui/layui.js"></script>

<script type="text/javascript">
    layui.config({
        base: '/static/client/js/util/'
    }).use(['element', 'laypage', 'form', 'menu', 'jquery'], function () {
        element = layui.element, laypage = layui.laypage, form = layui.form, menu = layui.menu;
        let $ = layui.jquery;
        menu.init();
        // menu.submit()

        //执行一个laypage实例
        let page = laypage.render({
            curr: $("#pageIndex").val(),
            limit: 5,
            elem: "demo"//注意，这里的 test1 是 ID，不用加 # 号
            , count: $("#count").val() //数据总数，从服务端得到
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    let path = location.href;
                    if (path.indexOf("?") != -1) {
                        path = path.substring(0, path.indexOf("?"))
                    }
                    window.location = path + "?pageIndex=" + obj.curr;
                }
            }
        });

        form.on('submit(commentForm)', function(data){
            $.ajax({
                url: "/comment/sendComment",
                data:data.field,
                dataType: "JSON",
                type: "POST",
                success: function (res) {
                    if (res.success){
                        data.form.reset();
                        layer.msg(res.content,{end:function () {
                                location.reload();
                            }});
                    }else {
                        layer.msg(res.content);
                        return false;
                    }
                }, error: function () {
                    layer.msg("服务器错误");
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    })

</script>
</body>
</html>